{% extends "base.html" %}

{% block header %}

{% endblock %}

{% block content %}
      <div id='add_new'>
        <div id='add-new-text' class='bold-text'>Add a new item</div>
        Class:
        <select id='new_post_course'>
          <option value=''>---</option>
          {% for course in courses %}
            <option value='{{course}}'>{{course}}</option>
          {% endfor %}
        </select><br>
        Name: <input type='text' id='new_post_name'><br>
        Due: <input type='text' id='new_post_date'>
        <input type='button' id='new_post_submit' value='Add Post'>
      </div>
      <div id='posts'>
        {% for post in posts %}
        <div class='post' id='{{post.course}}/{{post.name}}'>
          <div class='post-top'>
            <div class='post-class'><a href="/a/{{post.course}}">{{post.course}}</a>,</div>
            <div class='post-name'><a href="/a/{{post.course}}/{{post.name}}">{{post.name}}</a></div>
            <div class='post-due'>
              {{post.due}}
            </div>
          </div>
          <div class='post-content'>
            <div class='post-done'><a href='javascript:void(0);'>Not Done</a></div>
            <div class='post-hide'><a href='javascript:void(0);'>Hide</a></div>
            <div class='post-discussion'> 
              <div class="fb-comments" data-href="http://planner.sorestian.net/a/{{post.course}}/{{post.name}}" data-num-posts="2" data-width="600"></div>
            </div>
          </div>
        </div>
        {% endfor %}
      </div>
{% endblock %}